<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <script src="js/jquery-3.5.1.js"></script>

    <script type="text/javascript">
        $(function (){
            //id-->$("#div1")
            $("#id1").click(function (){
                $("#div1").css("backgroundColor","red")
            })
            //lable  -->$("div")
            $("#id2").click(function (){
                $("div").css("backgroundColor","green")
            })
            //class-->$("#div1")
            $("#id3").click(function (){
                $("#div1").css("backgroundColor","pink")
            })
            //两种-->$("span,#id1")
            $("#id4").click(function (){
                $("#id1").css("backgroundColor","red")
            })

        })
    </script>
</head>
<body>
    <input type="button" value="保存" class="mini" name="ok">
    <input type="button" value="改变id颜色" id="id1">
    <input type="button" value="改变div背景" id="id2">
    <input type="button" value="改变class_mini未红色" id="id3">
    <input type="button" value="span为红色" id="id4">

    <h1>第一个</h1>
<h1>第二个</h1>
<div id="div1" class="mini">
    div1:class_mini
    <div class="mini">class:mini</div>
</div>

<div class="div2">
         faefae
</div>

</body>
</html>